import React, { useState } from 'react';
import Draggable, { DraggableData, DraggableEvent } from 'react-draggable';
import { Modal } from 'antd';
import screenfull from 'screenfull';
import { InbizIcon } from '@inbiz/utils';
import ProcessLog from '@inbiz/basic/ProcessLog';
import { TextWidget } from '@inbiz/react';
import './index.less';

export default (props: { visible: any; $visible: any; logInfo: any; }) => {
  const { visible, $visible, logInfo } = props;
  const draggleRef = React.createRef();
  const [bounds, $bounds] = useState({ left: 0, top: 0, bottom: 0, right: 0 });
  const [isFullScreen, $isFullScreen] = useState(false);

  const onStart = (event: DraggableEvent, uiData: DraggableData) => {
    const { clientWidth, clientHeight } = window?.document?.documentElement;
    const targetRect = draggleRef?.current?.getBoundingClientRect();
    $bounds({
      left: -targetRect?.left + uiData?.x,
      right: clientWidth - (targetRect?.right - uiData?.x),
      top: -targetRect?.top + uiData?.y,
      bottom: clientHeight - (targetRect?.bottom - uiData?.y),
    });
  };

  const getFullScreenElement = () => {
    let managerModal = document.getElementsByClassName(
      'logModal',
    )[0];
    let fullScreenElement =
      managerModal?.getElementsByClassName('ant-modal-content')[0];
    return fullScreenElement;
  };

  const changeModal = (e: { stopPropagation: () => void; }) => {
    e.stopPropagation();
    screenfull.toggle(getFullScreenElement());
    $isFullScreen(!isFullScreen);
  };

  return (
    <Modal
      className={`logModal`}
      title={
        <div
          style={{
            width: '100%',
            cursor: 'move',
            color: '#333',
          }}
        >
          <TextWidget>processCenter.processLog</TextWidget>
        </div>
      }
      visible={visible}
      width={1500}
      // getContainer={() => document.getElementsByClassName('dn-main-panel')[0]}
      destroyOnClose
      onCancel={() => $visible(false)}
      footer={null}
      closeIcon={
        <div>
          <InbizIcon
            onClick={(e: any) => changeModal(e)}
            type={isFullScreen ? 'icon-huanyuan' : 'icon-ic-zuidahua'}
            style={{ fontSize: 22, marginRight: 20 }}
          />
          <InbizIcon type="icon-ic-close-bold" style={{ fontSize: 22 }} />
        </div>
      }
      bodyStyle={{
        height: 'calc(100vh - 200px)',
        overflow: 'auto',
        padding: '0px 20px 0',
      }}
      modalRender={(modal) => (
        <Draggable
          disabled={false}
          bounds={bounds}
          onStart={(event, uiData) => onStart(event, uiData)}
        >
          <div>{modal}</div>
        </Draggable>
      )}
    >
      <ProcessLog instanceId={logInfo?.instanceId} processId={logInfo?.processId} />
    </Modal>
  );
};
